<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Echarts Demo</title>
</head>
<body>
	 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:600px"></div>
    <script type="text/javascript" src="lib/echarts/build/dist/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="lib/echarts/build/dist/echarts.js"></script>
    <script type="text/javascript">
   
    (function(){
    	// 路径配置
	    require.config({
	        paths: {
	            echarts: 'lib/echarts/build/dist'
	        }
	    });
	    
    	require(['echarts','echarts/chart/map'],function(ec){
    		require('echarts/util/mapData/params').params.XM = {
    			 getGeoJson: function (callback) {
    			        $.getJSON('lib/geoJson/china-main-city/350200.json',callback);
    			    }
    		}
    		
    		// 基于准备好的dom，初始化echarts图表
    		 var myChart = ec.init(document.getElementById('main'));
    		 var option = {
    				 
    			     backgroundColor: 'rgb(6, 19, 37)',
    			    title : {
    			        text : '厦门监控管理',
    			      	textStyle:{
	    			        fontSize: 18,
	    			    	fontWeight: 'bolder',
	    			    	color: 'white'
    			    	}
    			    },
    			    tooltip : {
    			        trigger: 'item',
    			        formatter: '{b}<br/>{c} (异常人次)'
    			    },
    			    toolbox: {
    			        show: true,
    			        orient : 'vertical',
    			        x: 'right',
    			        y: 'center',
    			        feature : {
    			            mark : {show: true},
    			            dataView : {show: true, readOnly: false},
    			            restore : {show: true},
    			            saveAsImage : {show: true}
    			        }
    			    },
    			    dataRange: {
    			        min: 800,
    			        max: 50000,
    			        text:['High','Low'],
    			        realtime: false,
    			        calculable : true,
    			        color: ['orangered','yellow','lightskyblue']
    			    },
    			    series : [
    			        {
    			            name: '厦门监控',
    			            type: 'map',
    			            roam: true,
    			          selectedMode : 'multiple',
    			            mapType: 'XM', // 自定义扩展图表类型
    			            itemStyle:{
    			                normal:{label:{show:true}},
    			                emphasis:{label:{show:true}}
    			            },
    			            data:[
    			           
    			              {name:'同安区',value:40000},
    			              {name:'思明区',value:10000},
    			              {name:'湖里区',value:20000}
    			          
    			               
    			               
    			            ], markPoint : {
    			                symbolSize: 5,       // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
    			                itemStyle: {
    			                    normal: {
    			                       	borderColor:'rgba(100,149,237,1)',
    			                    	borderWidth:0.5,
    			                    	areaStyle:{
    			                        	color: '#1b1b1b'
    			                    	},
    			                               // 标注边线线宽，单位px，默认为1
    			                        label: {
    			                            show: false
    			                        }
    			                    },
    			                    emphasis: {
    			                        borderColor: '#1e90ff',
    			                        borderWidth: 5,
    			                        label: {
    			                            show: false
    			                        }
    			                    }
    			                },
    			                data : [
    			 
    			                    {name: "厦门附属中山医院", value: 40000}
    			                ]
    			            },
    			            geoCoord: {
    			 
    			                "厦门附属中山医院":[118.104598,24.477118]
    			            }
    			         
    			        }
    			    ]
    			};
    		 
    		// 为echarts对象加载数据 
    		 myChart.setOption(option);
    	});
    	
    })();
	 
    	
    	         
    
    </script>
</body>
</html>